<div class="container">
    <div class="row">
        <div class="col-1 logo-box">
            <img class="logo" src="../imgs/logo.png" alt="">
        </div>
        <div class="col-8  d-flex justify-content-center">
            <ul class="nav align-items-center ">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="/index.html">主页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/pages/list.html">商品列表</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/pages/shoppingCart.html">购物车</a>
                </li>
                <li class="nav-item">
                   
                </li>
            </ul>
        </div>
        <div id="userInfo" class="col-3 d-flex align-items-center ">
           
        </div>
    </div>
</div>

<script>
    let $userInfo = $("#userInfo");
    // 把用户名从本地存储中拿出来 并放入
    let username = localStorage.getItem("username");
    if (username) {
        // 有内容说明登录了
        $userInfo.html(`<div class="username col-6"><a>${username}</a></div>
        <div class="exit col-6"><a class="exit" href="">退出</a></div> `)
    } else {
        $userInfo.html(`<div class="username col-6"><a href="http://localhost:4000/pages/login.html">登录</a></div>
        <div class="exit col-6"><a href="http://localhost:4000/pages/regist.html">注册</a></div>`)
    }

    // 因为退出按钮不一定存在所以无法直接获取元素然后添加事件 所以使用委托模式
    $userInfo.on("click", "a.exit", function () {
        // 3 发送请求
        $.get('/lession05/exit', (data) => {
            console.log(data)
            if (!data.error) {
                // 1 清除本地存储
                localStorage.removeItem("username");
                pxmu.success(data.data);
                // 2 刷新页面
                location.reload();
            } else {
                pxmu.fail(data.data)
                localStorage.removeItem("username");
            }
        })
    })
</script>